<template>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
import 'echarts-gl'
import { createChartOption } from './option.js'; // 确保路径正确
import * as echarts from 'echarts'

export default {
    props: {
        Data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            chartInstance2: null,
            resizeObserver: null,
        };
    },
    watch: {
        Data: {
            handler(newData) {
                if (newData && newData.length > 0) {
                    // 创建新的数据对象，避免直接修改原数据
                    const formattedData = newData.map(item => ({
                        ...item,
                        plan_date: item.plan_date ? item.plan_date.replace('T', ' ') : item.plan_date
                    }));
                    this.updateChart(formattedData);
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        if (this.$refs.chartContainer) {
            this.chartInstance2 = echarts.init(this.$refs.chartContainer, this.$echartsConfig.theme);

            // 设置默认的图表配置
            const defaultOption = createChartOption(
                [0, 0, 0, 0, 0], // 默认的数据点
                ['', '', '', '', ''], // 默认的x轴标签
                '#51b7de' // 默认颜色
            );

            // 立即设置默认配置
            this.chartInstance2.setOption(defaultOption, true);

            // 监听容器大小变化
            this.resizeObserver = new ResizeObserver(() => {
                this.chartInstance2 && this.chartInstance2.resize();
            });
            this.resizeObserver.observe(this.$refs.chartContainer);
        }
    },
    methods: {
        updateChart(formattedData) {
            if (!formattedData) {
                console.warn('数据不完整，无法更新图表');
                return;
            }
            // 处理数组数据
            const daily_feed_amounts = [];
            const plan_dates = [];
            let color = '#51b7de';
            let yname = '每日计划投喂量(g)';
            // if (Array.isArray(formattedData)) {
            formattedData.forEach(item => {
                if (item.daily_feed_amount) {
                    daily_feed_amounts.push(item.daily_feed_amount);
                }
                if (item.plan_date) {
                    // 使用正则表达式匹配年月日
                    const dateOnly = item.plan_date.match(/^\d{4}-\d{2}-\d{2}/)[0];
                    plan_dates.push(dateOnly);
                }
                console.log("item.id", item.id);
                if (item.id && item.id == '1') {
                    color = '#fad25f';
                    yname = '每日计划投喂量(g)';
                }
                else if (item.id && item.id == '2') {
                    color = '#51b7de';
                    yname = '每日鱼规格(g)';
                }
            });
            const option = createChartOption(
                daily_feed_amounts,  // Y轴数据
                plan_dates,          // X轴数据
                color,           // 颜色
                yname           // 颜色
            );

            this.chartInstance2 && this.chartInstance2.setOption(option, true);
        },

    },
    beforeDestroy() {
        if (this.chartInstance2) {
            this.chartInstance2.dispose();
        }
        if (this.resizeObserver && this.$refs.chartContainer) {
            this.resizeObserver.unobserve(this.$refs.chartContainer);
            this.resizeObserver.disconnect();
        }
    }
};
</script>
